@extends('admin.layouts.master')

@section('content')

<div class="row">
	<div class="col-lg-12">
		<section class="panel aw-content">
			<header class="panel-heading">
			@if ($_GET['id']=='add')
				添加店面
			@elseif ($_GET['id']!='add') 
				编辑店面
			@endif
			</header>
			<div class="aw-mt20 overflow-hidden">
				
				<div class="col-xs-4 col-md-2">
					<div class="aw-banner-li" style="padding-bottom:0px;">
						<p>图片尺寸：160px*160px</p>
						<div class="form-group aw-hide">
							<input class="form-control" type="text" id="img" v-model="form_storefront.img" :value="form_storefront.img" class="aw-hide" placeholder="请上传门店图片">
						</div>
						<div class="aw-banner-li-upload" style="max-width:160px;">
							<img :src="form_storefront.img ? form_storefront.img : '/img/default_160_160.png'" onerror="javascript:this.src='/img/default_160_160.png';">
							<input class="aw-upload-file" type="file" name="upfile" id="file_img" v-on:click="Click_UpImg('img')">
						</div>
					</div>
				</div>
				<div class="col-xs-8 col-md-8">
				
				<div class="col-sm-12 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title" style="width: auto;">店面名称：</div>
					<div class="col-xs-8 aw-p0"><input type="text" placeholder="请输入店面名称" id="store_name" name="store_name" v-model="form_storefront.store_name" v-bind:value="form_storefront.store_name" class="form-control"></div>
				</div>
				<div class="col-sm-12 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title" style="width: auto;">店长姓名：</div>
					<div class="col-xs-8 aw-p0"><input type="text" placeholder="请输入店长姓名" id="manager_name" name="manager_name" v-model="form_storefront.manager_name" v-bind:value="form_storefront.manager_name" class="form-control"></div>
				</div>
				<div class="col-sm-12 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title" style="width: auto;">联系电话：</div>
					<div class="col-xs-8 aw-p0"><input type="text" placeholder="请输入联系电话" id="phone" name="phone" v-model="form_storefront.phone" v-bind:value="form_storefront.phone" class="form-control"></div>
				</div>
				<div class="col-sm-12 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title" style="width: auto;">店面地址：</div>
					<div class="col-xs-8 aw-p0"><input type="text" placeholder="请输入店面地址" id="store_adds" name="store_adds" v-model="form_storefront.store_adds" v-bind:value="form_storefront.store_adds" class="form-control"></div>
				</div>
				</div>
			</div>
			<div class="col-sm-12 aw-overflow-hidden aw-content-btn"><button type="submit" class="btn btn-gules" v-on:click="Save_Storefront()">保存</button></div>
			<header class="panel-heading">
			@if ($_GET['id']=='add')
				添加球场信息
			@elseif ($_GET['id']!='add') 
				编辑球场信息
			@endif	
			</header>
			<div class="aw-mt20 overflow-hidden">
				<div class="col-sm-12 col-md-6 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">球场类型：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择球场类型" id="type" name="type" v-model="form_field.type" v-bind:value="form_field.type" class="form-control">
							<option v-for="(list,key) in list_type" :value="list.id">@{{list.type_text}}</option>
						</select>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">场地号：</div>
					<div class="col-xs-8 aw-p0"><input type="text" id="number" name="number" v-model="form_field.number" v-bind:value="form_field.number" placeholder="请输入场地号" class="form-control"></div>
				</div>
				<div class="col-sm-12 col-md-6 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">场地规则：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择球场类型" id="program" name="program" v-model="form_field.program" v-bind:value="form_field.program" class="form-control">
							<option value="1">规则一 07:00开始规则</option>
							<option value="2">规则二 08:00开始规则</option>
						</select>
					</div>
				</div>
				<div class="col-md-12 aw-overflow-hidden aw-content-btn"><a v-on:click="Add_Field()" class="btn btn-gules">添加</a></div>
			</div>
			<header class="panel-heading">球场信息</header>
			<div class="overflow-hidden aw-field-list">
				<div v-if="lists.length==0" class="aw-text-center aw-list-null">暂无球场</div>
				<div class="col-sm-4 col-md-3 aw-field-list-li" v-for="(list, key) in lists" :data-key="key" :data-id="list.id">
					<div class="aw-field-li">
						<p>@{{form_storefront.store_name}}</p>
						<p>@{{list.type_text}}</p>
						<p>@{{list.number}}号场地</p>
						<select placeholder="请选择球场类型" v-model="list.program" :value="list.program" class="form-control aw-mt10" @change="List_Field_Select(key,list.program)">
							<option value="1">规则一</option>
							<option value="2">规则二</option>
						</select>
						<a class="btn btn-gules btn-xs" href="javascript:;" v-on:click="List_Del(list.id,list.type_text,list.number,form_storefront.store_name)">
							<i class="icon-trash"></i>
						</a>
					</div>
				</div>
			</div>
		</section>
	</div>
</div>

@section('pagejs')
@parent

<!--图片上传-->
<script type="text/javascript" src="/library/jquery-file-upload/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/library/jquery-file-upload/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="/admin/js/page.js"></script>
<script type="text/javascript">
var MJS_URLArry=URLArry;
var AD_info={
	api:'/adminapi/storefront/info',
	form_data:{id:MJS_URLArry.id},
	tips:false,
}
var AD_list={
	api:'/adminapi/field/list',
	form_data:{store_id:MJS_URLArry.id,page_num:100},
	tips:false,
}
//店面默认数据
var VD_form_storefront={
	store_name:'',manager_name:'',phone:'',store_adds:'',img:''
}
//场地默认数据
function VD_form_field(){
	var data={type:5,type_text:'',store_id:'',number:'',program:1}
	return data;
}
var Ajax_Vue_Fun_Info=function(vue_data){
	vm=new Vue({
		el:'#Vue-Body',
		data:{
			form_storefront:vue_data,
			form_field:VD_form_field(),
			list_type:Data_field_type_list,
			lists:{},
			currentProgram:''
		},methods:{
			Click_UpImg:function(name){
				Img_Upload(name,function(This,name,url){
					vm.form_storefront.img=url;
				})
			},Save_Storefront:function(){
				var tips='编辑';
				if(this.form_storefront.id=='add'){
					tips='添加';
				}
				var AD_storefront={
					api:'/adminapi/storefront/save',
					form_data:this.form_storefront,
					tips:tips+'店面成功',
				}
				$.each(this.form_storefront,function(name,val){
					var Msg=Placeholder_Text('#'+name)
					var Val=$('#'+name).val()
					if(Val==''){
						msgTips(Msg,2)
						$('#'+name).focus()
						return false;
					}
					if(name=='store_adds'&&Val){
						postData(AD_storefront,function(vue_data_storefront){
							vm.form_storefront.id=vue_data_storefront.id;
						})
					}
				})
			},Add_Field:function(){
				this.form_field.store_id=this.form_storefront.id;
				this.form_field.type_text=$("#type").find("option:selected").text();
				console.log(this.form_field)
				if(!this.form_field.store_id){
					msgTips('请先添加店面信息',2)
					return;
				}
				if(!this.form_field.type){
					msgTips('请选择球场类型',2)
					return;
				}
				if(!this.form_field.number){
					msgTips('请输入场地号',2)
					return;
				}
				var AD_field={
					api:'/adminapi/field/save',
					form_data:this.form_field,
					tips:'添加场地成功',
				}
				console.log(AD_field)
				var type=this.form_field.type;
				postData(AD_field,function(){
					console.log('场地添加成功')
					vm.lists.push(vm.form_field)
					vm.form_field=VD_form_field();
					vm.form_field.type=type;
				})
			},List_Del:function(id,type,num,name){
				var tisp='删除 ['+name+'-'+type+'-'+num+'号'+'] 场地';
				var AD_del={
					api:'/adminapi/field/del',
					form_data:{id:id},
					tips:tisp+'成功',
					msg:'是否'+tisp+'？',
				}
				//postData(AD_del,function(){
					//vm.list_field.splice(key,1)
				//})
				Vm_List_Status(AD_del,1)
			},List_Field_Select:function(key){
			    this.currentProgram =  this.lists[key].program == 1 ? 2 : 1;
			    var currentProgram = this.lists[key].program;
                var tisp='修改规则';
                var AD_del={
                    tips:tisp+'成功',
                    msg:'是否'+tisp+'？',
                }
				var Save_field={
					api:'/adminapi/field/save',
					form_data:this.lists[key],
					tips:'修改场地规则成功',
				};
				var _th = this;
                _th.lists[key].program = _th.currentProgram;
                Confirm_Ajax(AD_del,function () {
                    _th.lists[key].store_id=_th.lists[key].storefront_id;
                    _th.lists[key].program = currentProgram;
                    postData(Save_field,function(){})
                });
			}
		}
	})
	vm.form_field.type=$('#type option:eq(0)').val()
	getData(AD_list,Ajax_Vue_Fun_List)
}
var Ajax_Vue_Fun_List=function(vue_data){
	vm.lists=vue_data.list;
}
if(MJS_URLArry.id>0){
	getData(AD_info,Ajax_Vue_Fun_Info)
}else if(MJS_URLArry.id=='add'){
	Ajax_Vue_Fun_Info(VD_form_storefront)
}else{
	location.href='/admin/storefront/list?page_id=18';
}
</script>
@endsection

@endsection

